require(['./config'],()=>{
	require(['template',"request",'header','footer'],(template,req,header)=>{
		class Shopping{
			constructor(){
				this.totalCount = 0;
				this.priceTotal = 0;
				this.originPriceTotal = 0;
				this.prodList = [];
				this.init()			    
			}
			// 获取localStorage里的数据
			init(){
				let prodList = localStorage.getItem('prodList')?JSON.parse(localStorage.getItem('prodList')):[];
				// console.log(prodList)
				$('.product-list-cart').html(template('cartTemplate',{prodList}))
				
				this.prodList = prodList
				
				this.total(prodList)
				this.bindEvent()
				this.checkAll()
				header.allCount()
			}	
			// 商品数量与总价
			total(prodList){
				this.totalCount = 0;
				this.priceTotal = 0;
				this.originPriceTotal = 0;
				const totalCount =[]
				prodList.forEach(item => {					
					if(item.isChecked===true){
						totalCount.push(item)
						totalCount.forEach(item=>{
							this.totalCount += item.count;
							this.priceTotal += item.count * item.price;
							this.originPriceTotal += item.count * item.originPrice
						})
					}

				})
				$('.totalCount').html(this.totalCount)
				$('.dazhe').html(this.priceTotal.toFixed(2))
				$('.originPrice').html(this.originPriceTotal.toFixed(2))
				
			}
			bindEvent(){
				// 删除事件
				$('.product-list-cart')[0].onclick = e => {
					const target = e.target;
					// console.log(target)
					const id = $(target).attr('prodId') - 0;
					
					if(target.nodeName === 'BUTTON' && (target.className.indexOf('btn-del') != -1)){
						this.prodList.forEach((item,index) => {
							if(item.id === id){
								this.prodList.splice(index,1)
								console.log(this.prodList)
							}
						})
					}
					if(target.nodeName === 'SPAN' && (target.className.indexOf('btn-del') != -1)){
						this.prodList.forEach((item,index) => {
							if(item.id === id){
								this.prodList.splice(index,1)
								console.log(this.prodList)
							}
						})
					}
					// 加减数量
					if(target.nodeName === 'A' && $(target).hasClass('minus')){
						this.prodList.forEach(item => {
							if(item.id === id){
								item.count <= 1 ? '':item.count--
							}
						})
					}
					if(target.nodeName === 'A' && $(target).hasClass('plus')){
						this.prodList.forEach(item => {
							if(item.id === id){
								item.count++;
							}
						})
					}
					
					//重新渲染
					localStorage.setItem('prodList',JSON.stringify(this.prodList))
					this.init()
				}				
			}
			checkAll(){
				const that = this;
				// 全选
				$('.quanxuan')[0].onclick = function(){
					$(this).toggleClass('checked')
					
					that.prodList.forEach(item => {
						// 判断quanxuan有没有类名checked
						item.isChecked = $(this).hasClass('checked')
					})
					//重新渲染
					localStorage.setItem('prodList',JSON.stringify(that.prodList))
					that.init()
				}
				// 单选
				const btns = Array.from(document.getElementsByClassName('btn-option'))
				btns.forEach((item,index) => {
					item.onclick = function(){
						that.prodList[index].isChecked = !(that.prodList[index].isChecked)
						//重新渲染
						localStorage.setItem('prodList',JSON.stringify(that.prodList))
						that.init()
						
						var a = that.prodList.every(item => {
							return item.isChecked
						})
						if(a){
							$('.quanxuan').addClass('checked')
						}else{
							$('.quanxuan').removeClass('checked')
						}
																
					}
				})
			}
		}
		return new Shopping()
	})
})

